﻿
/**
* jQuery :  省市县联动插件
* @author   Zaric
* @example  $("#test").province_city_county();
*/

$.fn.province_city_county = function (vprovince, vcity, vtown) {
    var _self = this;
    //定义3个默认值
    _self.data("province", ["请选择", "0"]);
    _self.data("city", ["请选择", "0"]);
    _self.data("county", ["请选择", "0"]);
    //插入3个空的下拉框
    //_self.append("<select id='province' name='province'></select>");
    //_self.append("<select id='city' name='city'></select>");
    //_self.append("<select id='county' name='county'></select>");
    _self.html("<select id='province' name='province' style='width: 80px'></select><select id='city' name='city' style='width: 80px'></select><select id='county' name='county' style='width: 80px'></select>");
    //分别获取3个下拉框
    var $sel1 = _self.find("select").eq(0);
    var $sel2 = _self.find("select").eq(1);
    var $sel3 = _self.find("select").eq(2);
    //默认省级下拉
    if (_self.data("province")) {
        $sel1.append("<option value='" + _self.data("province")[1] + "'>" + _self.data("province")[0] + "</option>");
    }
    $.get('Handler/ChnaAreaHandler.ashx?flag=provice', function (data) {
        var arrList = data.split(",");
        for (var i = 0; i < arrList.length; i++) {
            var objData = eval(arrList[i]);
            $sel1.append("<option value=" + objData.ProvinceID + ">" + objData.ProvinceName + "</option>");
        }
        if (typeof vprovince != undefined) {
            $sel1.val(vprovince);
            $sel1.change();
        }
    });
    //默认城市下拉
    if (_self.data("city")) {
        $sel2.append("<option value='" + _self.data("city")[1] + "'>" + _self.data("city")[0] + "</option>");
    }
    //默认县区下拉
    if (_self.data("county")) {
        $sel3.append("<option value='" + _self.data("county")[1] + "'>" + _self.data("county")[0] + "</option>");
    }
    //省级联动控制
    var index1 = "";
    var provinceValue = "";
    var cityValue = "";
    $sel1.change(function () {
        //清空其它2个下拉框
        $sel2[0].options.length = 0;
        $sel3[0].options.length = 0;
        index1 = this.selectedIndex;
        if (index1 == 0) {    //当选择的为 “请选择” 时
            if (_self.data("city")) {
                $sel2.append("<option value='" + _self.data("city")[1] + "'>" + _self.data("city")[0] + "</option>");
            }
            if (_self.data("county")) {
                $sel3.append("<option value='" + _self.data("county")[1] + "'>" + _self.data("county")[0] + "</option>");
            }
        } else {
            provinceValue = $('#province').val();
            $.get('Handler/ChnaAreaHandler.ashx?flag=city&province=' + provinceValue, function (data) {
                var arrList = data.split(",");
                for (var i = 0; i < arrList.length; i++) {
                    var objData = eval(arrList[i]);
                    $sel2.append("<option value=" + objData.CityID + ">" + objData.CityName + "</option>");
                }
                cityValue = $("#city").val();
                $.get('Handler/ChnaAreaHandler.ashx?flag=county&province=' + provinceValue+'&city='+cityValue, function (data) {
                var arrList = data.split(",");
                for (var i = 0; i < arrList.length; i++) {
                    var objData = eval(arrList[i]);
                    $sel3.append("<option value=" + objData.CountyID + ">" + objData.CountyName + "</option>");
                }
                if (typeof vcity != undefined) {
                    $sel2.val(vcity);
                    $sel2.change();
                }
                if (typeof vtown != undefined) {
                    $sel3.val(vtown);
                }
            });
        }
    }).change();
    //城市联动控制
    var index2 = "";
    $sel2.change(function () {
        $sel3[0].options.length = 0;
        var cityValue2 = $('#city').val();
        var provinceValue2 = $('#province').val();
                $.get('Handler/ChnaAreaHandler.ashx?flag=county&province=' + provinceValue2+'&city='+cityValue2, function (data) {
                var arrList = data.split(",");
                for (var i = 0; i < arrList.length; i++) {
                    var objData = eval(arrList[i]);
                    $sel3.append("<option value=" + objData.CountyID + ">" + objData.CountyName + "</option>");
                }
            if (typeof vtown != undefined) {
                $sel3.val(vtown);
            }
        });
    });
    return _self;
};
